
import { useRequest } from 'ahooks'
import { } from 'ahooks'
import { getUserList, upDateUser } from '@/api/users'
import { ProTable, ProColumns, ActionType, Search, recordKeyToString } from '@ant-design/pro-components';
import { RedoOutlined } from '@ant-design/icons';
import { Button, message } from 'antd';
import { ReactNode, useEffect, useRef } from 'react';
import { BasePageParams } from '@/api/api';


export default function IndexPage() {
  const actionRef = useRef<ActionType | undefined>();
  const { runAsync } = useRequest<any, any>(getUserList, {
    manual: true
  })
 const init =()=>{
  actionRef.current?.reload && actionRef.current.reload()
    // actionRef.current.reload && actionRef.current.reload();
 }
  const columns: ProColumns = [
    {
      dataIndex: 'index',
      valueType: 'indexBorder',
      width: 48,
    },
    {
      title: '账号',
      dataIndex: 'name'
    },
    {
      title: '邮箱',
      dataIndex: 'email'
    },
    {
      title: '角色',
      dataIndex: 'role',
      render: (text: ReactNode) => (
        <span>
          <i className={text === 'visitor' ? 'on' : ''}></i>&emsp;
          {text === 'visitor' ? '访客' : '管理员'}
        </span>
      ),
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: (text: ReactNode) => (
        <span>
          <i className={text === 'active' ? 'on' : ''}></i>&emsp;
          {text === 'active' ? (
            <span>
              <span className="ant-badge-status-dot ant-badge-status-green"></span>{' '}
              可用
            </span>
          ) : (
            <span>
              <span className="ant-badge-status-dot ant-badge-status-gold"></span>{' '}
              已锁定
            </span>
          )}
        </span>
      ),
    },
    {
      title: '注册日期',
      dataIndex: 'createAt',
      renderFormItem: () => null
    },
    {
      title: '操作',
      render: (text, record, _, action) => {
        //设置启动和授权
        const emitState = (records: BasePageParams | undefined) => {
          upDateUser(records).then((res) => {
            
            
            if (res.statusCode === 201) {
             
              message.success('操作成功');
              // record.reload()
            }
            init()
          });
          
        };
        return <div>
          <Button type='link'>
            <a
              onClick={() => {
                if (record.status == 'locked') {
                  // @ts-ignore
                  record.status = 'active';
                  // @ts-ignore
                } else if (record.status == 'active') {
                  // @ts-ignore
                  record.status = 'locked';
                }
                
                
                emitState(record);
              }}
            >
              {record.status == 'locked' ? '启动' : '禁用'}
            </a>

          </Button>
          <Button type='link'>
            <a onClick={() => {
              if (record.role == 'visitor') {
                // @ts-ignore
                record.role = 'admin';
                // @ts-ignore
              } else if (record.role == 'admin') {
                // @ts-ignore
                record.role = 'visitor';
              }
              emitState(record);
            }}>
              {
                record.role === 'admin' ? '解除授权' : '授权'
              }
            </a>
          </Button>
        </div>
      },
  
    }
  ]
  const { data, error, loading } = useRequest(getUserList)

  console.log('用户管理', data);

  return (
    <ProTable

      rowSelection={{  //多选
        type: 'checkbox'
      }}
      actionRef={actionRef}
      columns={columns}  //列配置
      rowKey={'id'}
      pagination={{  //默认分页数据
        current: 1,
        pageSize: 10
      }}
      search={{
        searchText: '查询',
        span: 5,
        optionRender: (searchConfig, forProps, dom) => {
          return dom
        }
      }}
      toolbar={{
        actions: [
          <Button
            key="reload"
            icon={<RedoOutlined />}
            onClick={()=>{
              init()
            }}
          ></Button>
        ],
        settings: []
      }}

      request={
        async (options) => {  //初始化创建表格执行 分页改变执行 点击查询的时候会执行
          console.log('request-------:', options);
          options = {
            ...options,
            page: options.current,
          }
          delete options.current;
          const { data } = await runAsync(options);  //发请求
          return {
            data: data[0],
            success: true,
            total: data[1]
          }
        }
      }
    />
  );
}

